<template>
    <div>
        <el-card class="card" v-for="stu in stus">
            <template #header>
                <div class="card-header">
                    <span><el-avatar :size="50" :src="stu.avatar" /></span>
                    <span class="name">{{stu.name}}</span>
                </div>
            </template>
            <div>
                <p>年龄：{{stu.age}}</p>
                <p>性别：{{stu.sex}}</p>
                <p>总分：{{stu.score.yw+stu.score.sx+stu.score.yy}} </p>
                <!-- <p>总分：{{Number(stu.score.yw)+Number(stu.score.sx)+Number(stu.score.yy)}} </p> -->
            </div>
            <el-tooltip placement="bottom" v-if="stu.score.yw>=60&stu.score.sx>=60&stu.score.yy>=60">
                <template #content>
                    <p>语文：{{stu.score.yw}}</p>
                    <p>数学：{{stu.score.sx}}</p>
                    <p>英语：{{stu.score.yy}}</p>
                </template>
                <el-button>查看成绩单</el-button>
            </el-tooltip>
        </el-card>
    </div>
</template>

<script>
export default {
    name: 'Report',
    props: {
        stus: Array
    },
    setup() {

    }
}
</script>

<style>
.card {
  min-width: 200px;
  height: 280px;
  margin: 10px;
}
.card .card-header span {
  vertical-align: middle;
}

.card .card-header .name {
  height: 50px;
  line-height: 50px;
  margin-left: 10px;
}
</style>